<template>
  <el-dialog v-model="show" width="1000px" title="订单详情" append-to-body :close-on-click-modal="true">
    <div>
      <h3>接送地点： {{ orderInfo.name }}</h3>
    </div>
    <table class="table">
      <tr>
        <th>车辆情况</th>
        <th>车辆颜色</th>
        <th>座位数</th>
        <th>车辆数量</th>
        <th>用途</th>
        <th>单价</th>
      </tr>
      <tr v-for="c in messageObj.carsList" v-show="c.num>0">
        <td>{{ c.name }}</td>
        <td>{{ c.carColor }}</td>
        <td>
          {{c.carSeat}}
        </td>
        <td>{{ c.num }}</td>
        <td>{{ c.typeName }}</td>
        <td>{{ c.price }}</td>
      </tr>
    </table>
    <el-row>
      <el-col v-if="jsInfo.pickUpBo?.carsList.length>0" :span="12">
        <h3>接站信息</h3>
        <p>接站时间：{{ dayjs(jsInfo.pickUpBo.revTime).format('YYYY-MM-DD HH:mm:ss') }}</p>
        <p>联系人：{{ jsInfo.pickUpBo.contacts }}</p>
        <p>联系电话：{{ jsInfo.pickUpBo.phone }}</p>
        <p>人数：{{ jsInfo.pickUpBo.count }}</p>
        <p>航班/火车班次：{{ jsInfo.pickUpBo.no }}</p>
        <p>班次时间：{{ dayjs(jsInfo.pickUpBo.noTime).format('YYYY-MM-DD HH:mm:ss') }}</p>
        <p>接站地点：{{ jsInfo.pickUpBo.noAddress }}</p>
        <p>送达地点：{{ jsInfo.pickUpBo.deliveryAddress }}</p>
        <p>备注：{{ jsInfo.pickUpBo.remarks || '无' }}</p>

      </el-col>
      <el-col v-if="jsInfo.dropOffBo?.carsList.length>0" :span="12">
        <h3>送站信息</h3>
        <p>送站时间：{{ dayjs(jsInfo.dropOffBo.revTime).format('YYYY-MM-DD HH:mm:ss') }}</p>
        <p>送站联系人：{{ jsInfo.dropOffBo.contacts }}</p>
        <p>联系电话：{{ jsInfo.dropOffBo.phone }}</p>
        <p>备注：{{ jsInfo.dropOffBo.remarks || '无' }}</p>

      </el-col>
    </el-row>

    <el-row style="background: #f8f8f8;padding: 10px">
      <el-col :span="12">
        <p>订单编号：{{ orderInfo.id }}</p>
        <!--        <p>下单账号：{{orderInfo.id}}</p>-->
        <!--        <p>下单时间：{{orderInfo.id}}</p>-->
        <!--        <p>付款账号：{{orderInfo.payId}}</p>-->
      </el-col>
      <el-col :span="12">
        <p v-if="orderInfo.status=='1'">付款时间：{{ orderInfo.payDate }}</p>
        <p v-if="orderInfo.status=='1'">付款方式：<span>{{ orderInfo.paymentTypeStr }}</span></p>
        <!--        <p>交易流水号：{{orderInfo.id}}</p>-->
        <p>订单状态：
          <!-- 0  未支付  1  支付成功   2  已取消  3  已退订 -->
          <span v-if="orderInfo.status=='0'">未支付</span>
          <span v-if="orderInfo.status=='1'||orderInfo.status=='5'" class="text-success">支付成功</span>
          <span v-if="orderInfo.status=='2'" class="text-warning">已取消</span>
          <span v-if="orderInfo.status=='7'" class="text-warning">退款审核中</span>
          <span v-if="orderInfo.status=='3'||orderInfo.status=='4'" class="text-danger">已退订</span>
        </p>

      </el-col>
      <el-col :span="24">
        <p>备注：{{ orderInfo.remarks||'无' }}</p>
      </el-col>
    </el-row>

  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { getOrderById } from '@/api/logex/order'
import { dayjs } from 'element-plus'

const show = ref(false)
const jsInfo = ref({})
const messageObj = ref({})
const orderInfo = ref({})

function open(order) {
  getOrderById(order.id).then(res => {
    orderInfo.value = res.data
    jsInfo.value = JSON.parse(res.data.extJson)
    messageObj.value = JSON.parse(res.data.message)
    console.log(jsInfo.value)
  })

  show.value = true
}

defineExpose({
  open
})

</script>

<style scoped lang="scss">
dt{font-size: 16px;display: flex;justify-content: space-between;width: 50%;}
dd{display: flex;justify-content: space-between;width: 50%;}
.table{border-left: 1px solid #e1e1e1;border-top: 1px solid #e1e1e1;width: 100%;margin-bottom: 20px;
  text-align: center;
  th{background: #f8f8f8;width: 160px;}
  th,td{border-right: 1px solid #e1e1e1;border-bottom: 1px solid #e1e1e1;
    padding:10px;
  }
}
</style>
